<template>
	<view class="om">
		<u-sticky bgColor="#fff">
			<view class="m-x-30 p-y-20">
				<u--input placeholder="输入仪器名称，如介质损耗测定仪" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"
					border="none" :clearable="true" v-model="form.name" @confirm="getOmList" @clear="onClear"></u--input>
				<u-tabs :list="tabList" @click="click" :activeStyle="{ color: '#3c9cff', fontWeight: 'bold' }"></u-tabs>
			</view>
		</u-sticky>
		<view class="card-list">
			<view v-for="(item, index) in list" :key="index"
				:class="[`card-item ${item.error?'wrong-border':'normal-border'}`]" @click="onDetail(item.id)">
				<view class="p-x-14">
					<view class="j-between electric">
						<template v-if="item.deviceDTO">
							<view :class="[`${!item.elec?'wrong':'normal'}`]">
								电量{{!item.elec?'过低':'正常'}}
							</view>
							<view>
								<image :src="item.imgDevice" style="width: 30rpx;height: 17rpx;margin-right: 8rpx;">
								</image>
								<text :class="[`${!item.elec?'w-c':'w-n'}`]">
									{{`${item.deviceDTO.percentageElectricQuantity}%`}}
								</text>
							</view>
						</template>
					</view>
					<view class="name text-e">{{item.name}}</view>
					<view class="model text-e">型号规格:{{item.modelNumber|| '-'}}</view>
				</view>
				<view class="info" :class="[`${item.error?'wrong':'normal'}`]">
					<image :src="item.img" style="width: 20rpx;height: 20rpx;margin: 0 8rpx;">
					</image>
					距离{{textList[code]}}时间还剩{{item[`${code}Day`]||0}}天
				</view>
			</view>
		</view>
		<view class="loadmore" v-if="list.length">
			<u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
				:nomore-text="nomoreText" />
		</view>
		<u-gap height="10" bgColor="#f6f7f9"></u-gap>
		<u-empty v-if="!list.length" mode="list" icon="/static/null.png">
		</u-empty>
	</view>
</template>

<script>
	import SetTabBar from '@/mixins/SetTabBar.js'
	export default {
		mixins: [SetTabBar],
		onShow() {
			// #ifdef MP-WEIXIN
			this.setTabBarIndex(0);
			// #endif
			this.getOmList()
			this.getAlertNum()
		},
		data() {
			return {
				// 记录code值
				code: 'charge',
				// 没电叹号 有电叹号 没电电池 有电电池
				urlList: ['/static/icons/wrong.png', '/static/icons/normal.png', '/static/icons/low.png',
					'/static/icons/full.png'
				],
				list: [],
				textList: {
					charge: '充电',
					exchange: '换电',
				},
				tabList: [{
						name: '充电',
						code: 'charge',
					},
					{
						name: '更换电池',
						code: 'exchange',
					},
				],
				total: 0,
				form: {
					name: '',
					limit: 20,
					order: 'asc', // 排序，asc／desc
					page: 1,
				},
			}
		},
		// 上拉加载更多
		onReachBottom() {
			if (this.total > this.form.limit) {
				this.form.limit = this.form.limit + 10
				this.getOmList()
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.form.limit = 20
			this.getOmList()
			this.getAlertNum()
		},
		methods: {
			// 清空仪器名称
			onClear() {
				this.form.name = ''
				this.getOmList()
			},
			// 获取列表 对`${type}Day`升序排列
			async getOmList() {
				this.status = 'loading';
				const {
					data
				} = await this.$api.getOmList({
					...this.form,
					orderField: `${this.code}_day`,
				})
				if (data) {
					this.total = data.total
					this.list = data.list.map(item => {
						item.error = item[`${this.code}Day`] < 15
						// 仪器是否需要操作字段
						item.img = item.error ? this.urlList[0] : this.urlList[1]
						// 仪器绑定的定位设备字段
						item.imgDevice = ''
						item.elec = false
						if (item.deviceDTO) {
							item.imgDevice = +item.deviceDTO.percentageElectricQuantity <= 20 ? this.urlList[2] : this.urlList[3]
							item.elec = +item.deviceDTO.percentageElectricQuantity <= 20 ? false : true
						}
						return item
					})
					this.status = this.total <= this.form.limit ? 'nomore' : 'loadmore';
				}
				uni.stopPullDownRefresh();
			},
			// 获取报警数量
			async getAlertNum() {
				const res = await this.$api.getAlertNum()
				if (res.data) {
					this.tabList.forEach(item => {
						if (res.data[item.code] && res.data[item.code] != 0) {
							item.badge = {
								value: res.data[item.code],
							}
						} else {
							item.badge = {}
						}
					})
				}
			},
			// 切换tab类型
			click(item) {
				this.code = item.code
				this.getOmList()
			},
			onDetail(id) {
				uni.navigateTo({
					url: `/pages/om/detail?id=${id}&code=${this.code}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	$wrongColor: #D91A1A;
	$normalColor: #09B300;

	.om {
		// background-color: #fff;
		// padding: 30rpx;

		.u-input {
			background-color: #F7F8FA;
			height: 65rpx;
		}

		.u-empty {
			background-color: #f6f7f9;
		}
	}

	.card-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		background-color: #F7F8FA;
		margin-bottom: 100rpx;
		padding: 0 30rpx;
		margin: 20rpx 0;
	}

	.card-item {
		width: calc(50% - 20rpx);
		background-color: #fff;
		margin-top: 20rpx;
		padding-top: 10rpx;
		border-radius: 10rpx;
	}

	.info {
		font-size: 20rpx;
	}

	.electric {
		font-size: 18rpx;
		height: 20rpx;
	}

	.name {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		padding: 10rpx 0;
	}

	.model {
		font-size: 26rpx;
		font-weight: 400;
		color: #59606A;
		padding: 20rpx 0;
	}

	.wrong {
		background-color: rgba(217, 26, 26, 0.1);
		color: $wrongColor;
		padding: 0 10rpx;
		border-radius: 5rpx;
	}

	.normal {
		background-color: rgba(9, 179, 0, 0.1);
		color: $normalColor;
		padding: 0 10rpx;
		border-radius: 5rpx;
	}

	.w-c {
		color: $wrongColor;
	}

	.w-n {
		color: $normalColor;
	}

	.wrong-border {
		border: 1px solid $wrongColor;
	}

	.normal-border {
		border: 1px solid $normalColor;
	}
</style>